<template>
  <view class="invitation-ranking-main">
    <view class="container">
      <Header transparent="auto" title="" titleColor="#FFF" varietyTitleColor="#000"></Header>
      <CapsuleTabs
        :list="capsuleTabsList.map((item) => item.title)"
        v-model:current="current"
        active-bg-color="#FFFFFF"
        active-color="#2878FF"
        default-bg-color="#2878FF"
        default-color="#FFFFFF"
        :border="true"
        @change="change"
      ></CapsuleTabs>
      <!-- <view class="desc">{{ current ? '仅统计本小程序用户分享浏览数据' : '' }}</view> -->
      <view class="podium-box">
        <Podium :topThree="rows.slice(0, 3)"></Podium>
      </view>
      <view class="rank-list-box">
        <RankList :columns="columns" :rows="rows">
          <template #row="{ row, column, rows }">
            <view>
              <template v-if="column.key === 'rankNum'">
                <template v-if="row['rankNum'] === 1">
                  <Crown
                    icon="icon-huangguan1"
                    icon-color="#fff001"
                    icon-font-size="56rpx"
                    icon-text="1"
                    icon-text-color="#B0A600"
                    icon-text-font-size="24rpx"
                    translateY="-20%"
                  ></Crown>
                </template>
                <template v-else-if="row['rankNum'] === 2">
                  <Crown
                    icon="icon-huangguan2"
                    icon-color="#c6d3e3"
                    icon-font-size="56rpx"
                    icon-text="2"
                    icon-text-color="#8FA2BB"
                    icon-text-font-size="24rpx"
                    translateY="-20%"
                  ></Crown>
                </template>
                <template v-else-if="row['rankNum'] === 3">
                  <Crown
                    icon="icon-huangguan3"
                    icon-color="#f8a86e"
                    icon-font-size="56rpx"
                    icon-text="3"
                    icon-text-color="#C77B44"
                    icon-text-font-size="24rpx"
                    translateY="-20%"
                  ></Crown>
                </template>
                <template v-else>
                  <view class="rank-text">
                    {{ row[column.key] }}
                  </view>
                </template>
              </template>
              <template v-else-if="column.key === 'userName'">
                <view class="user-name-box">
                  <TImage
                    :src="row['avatar']"
                    errorImgType="person"
                    width="56rpx"
                    height="56rpx"
                    border-radius="50%"
                  />
                  <text class="name ov-1">{{ row[column.key] }}</text>
                  <view v-if="row['memberLevelName']" class="member-level-name">
                    {{ row['memberLevelName'] }}
                  </view>
                </view>
              </template>
              <template v-else-if="column.key === 'rankValue'">
                <text class="number-box" @click="toDetail(row['appUserInfoId'])">
                  带来
                  <text class="number">
                    {{ row[column.key] }}
                  </text>
                  位{{ currentRankType === RankTypeEnum.INVITE_REGISTER ? '报名' : '浏览' }}
                  <text
                    v-if="roleType === RoleType.ADMIN"
                    class="ali-icon icon-you1"
                    style="font-size: 24rpx"
                  ></text>
                </text>
              </template>
            </view>
          </template>
        </RankList>
        <Empty v-if="rows.length == 0" text="暂无数据" />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import Header from '@/components/Header/index.vue';
  import CapsuleTabs from '@/components/CapsuleTabs/index.vue';
  import Podium from './Podium.vue';
  import RankList, { type Column } from './RankList/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import Crown from './Crown.vue';
  import Empty from '@/components/Empty/Empty.vue';
  import { computed, onMounted, reactive, ref, unref, type PropType } from 'vue';
  import { RoleType } from '@/enums/publicModuleEnum';
  import { type IRankList, type IRankListQuery } from '@/api/activity/types';
  import { getRankList } from '@/api/activity';
  import { RankTypeEnum } from '@/enums/activityStatusEnum';
  const props = defineProps({
    activityId: {
      type: Number,
      default: undefined,
    },
    roleType: {
      type: String as PropType<RoleType>,
      default: RoleType.USER,
    },
  });

  const emits = defineEmits(['to-detail']);

  const current = ref(0);

  const capsuleTabsList = [
    { title: '带来报名', value: RankTypeEnum.INVITE_REGISTER },
    { title: '带来浏览', value: RankTypeEnum.INVITE_SHARE },
  ];

  const columns = computed<Column[]>(() => {
    return [
      { title: '排名', key: 'rankNum', width: '80rpx', align: 'center' },
      { title: '用户', key: 'userName', width: 'auto', align: 'left' },
      {
        title: current.value ? '带来浏览人数' : '带来报名数',
        key: 'rankValue',
        width: '200rpx',
        align: 'right',
      },
    ];
  });

  const currentRankType = computed(() => capsuleTabsList[current.value].value);

  const rows = ref<IRankList[]>([]);

  const qeuryData = computed<IRankListQuery>(() => {
    return {
      activityId: props.activityId!,
      rankType: currentRankType.value,
    };
  });

  const queryRankList = async () => {
    rows.value = await getRankList(qeuryData.value, props.roleType);
  };

  onMounted(() => {
    queryRankList();
  });

  const change = (index: number) => {
    queryRankList();
  };

  const toDetail = (appUserInfoId: number) => {
    emits('to-detail', appUserInfoId);
  };
</script>
<style lang="scss" scoped>
  .invitation-ranking-main {
    background-color: #2878ff;
    .container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      .desc {
        color: #fff;
        text-align: center;
        font-size: 24rpx;
        line-height: 32rpx;
        height: 32rpx;
        opacity: 0.5;
      }
      .podium-box {
        padding: 96rpx 20rpx 0 20rpx;
      }
      .rank-list-box {
        flex: 1;
        background: #fff;
        border-radius: 32rpx 32rpx 0px 0px;
        .no-data {
          display: flex;
          justify-content: center;
          color: #ccccc8;
          font-size: 28rpx;
          margin-top: 50rpx;
        }
        .rank-text {
          color: #ccccc8;
          font-size: 28rpx;
          font-weight: 700;
        }
        .user-name-box {
          display: flex;
          align-items: center;
          position: relative;
          .name {
            color: #333;
            font-size: 28rpx;
            font-weight: 400;
            line-height: 40rpx;
            margin-left: 24rpx;
          }
          .member-level-name {
            display: flex;
            padding: 4rpx 12rpx;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 2px;
            background: linear-gradient(90deg, #fdedc7 0.12%, #f7d9a2 100%);
            color: #ea5e0e;
            font-size: 20rpx;
            font-weight: 400;
            line-height: 28rpx;
            margin-left: 8rpx;
            white-space: nowrap;
          }
        }
        .number-box {
          color: #333;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 32rpx;
          white-space: nowrap;
          .number {
            color: #2878ff;
          }
        }
      }
    }
  }
</style>
